<template>
  <div class="common-login">
    <el-form ref="loginForm" :model="loginFormData" status-icon :rules="commonRules" label-width="120px"
      class="demo-loginFormData">
      <el-form-item label="用户名" prop="username" class="username-form-item">
        <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha" class="captcha">
        <el-input v-model="loginFormData.captcha" @keydown.enter="submitForm(loginForm)" maxlength="5" />
        <span v-loading="loading" v-html="captcha" @click="getCaptcha"></span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(loginForm)">登入</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script setup>
import * as api from "@/api/users.js";
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { commonRules, useSubmitForm } from "../../composition/login/validate";
import { ElLoading } from 'element-plus'
import { useUser } from "@/store/users";
import { useRouter } from "vue-router";
let router = useRouter();
let userStore = useUser();
let loading = ref(true);
let validateSuccess = () => {
  verifyCaptcha(loginFormData.captcha.toLowerCase());
};
let validateFailed = () => {
  console.log("校验失败");
};
let submitForm = useSubmitForm(validateSuccess, validateFailed);
const loginForm = ref();
const loginFormData = reactive({
  username: "",
  password: "",
  captcha: ""
});
let captcha = ref();
let getCaptcha = async () => {
  loading.value = true;
  let res = await api.getCaptchaApi();
  loading.value = false;
  if (res.data.state) captcha.value = res.data.img;
};
let loadingInstance = null;
let verifyCaptcha = async captcha => {
  loadingInstance = ElLoading.service({
    text: '正在登入...',
    background: 'rgba(0,0,0,.4)'
  })
  try {
    let res = await api.verifyCaptchaApi(captcha);
    login(loginFormData.username, loginFormData.password);
  } catch (e) {
    getCaptcha();
    loadingInstance.close()
  }
};
let login = async (username, password) => {
  try {
    let res = await api.loginApi(username, password);
    sessionStorage.setItem("myx-token", res.data.token);
    userStore.$patch({
      userInfo: res.data.userInfo
    });
    router.push("/");
  } catch (e) {
    loadingInstance.close()
    console.log(e)
  }
};


onUnmounted(() => {
  console.log('组件卸载了')
  loadingInstance && loadingInstance.close()
})
onMounted(() => {
  getCaptcha();
});
</script>
<style scoped lang="scss">
.captcha {
  display: flex;
  :deep(.el-input) {
    width: 100px;
    border-right: none;
    .el-input__wrapper {
      border-radius: 5px 0 0 5px;
      box-shadow: none;
    }
  }
  span {
    height: 42px;
    background-color: #fff;
    display: inline-block;
    border-left: none;
    border-radius: 0 5px 5px 0;
    width: 60%;
    cursor: pointer;
  }
}
.el-form {
  padding-right: 50px;
  margin-left: -20px;
  :deep(.el-button--primary) {
    height: 40px;
    width: 250px;
    background: linear-gradient(90deg, #1596fb, #002dff);
  }
}
:deep(.el-form-item__label) {
  color: #fff;
  line-height: 40px;
}
:deep(.el-input__inner) {
  height: 40px;
}
</style>